<template>
  <div
    class="echarts"
    id="echarts"
    ref="chartRef"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import * as echarts from "echarts/core";
import { RadarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import type { RadarSeriesOption } from "echarts/charts";
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  RadarComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
// 定义 klScoreLev 中 indicatorname 数组元素的类型
interface IndicatorNameItem {
  name: string;
}
// 定义 klScoreLev 的类型
interface KlScoreLevType {
  indicatorname: IndicatorNameItem[];
  all: number[];
  mine: number[];
}
// 定义 props 类型
const props = defineProps<{
  klScoreLev: KlScoreLevType;
}>();
type ECOption = ComposeOption<
  | RadarSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | RadarComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  RadarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer,
]);

const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;
onMounted(() => {
  if (props.klScoreLev) {
    if (chartRef.value) {
      // const myChart = echarts.init(chartRef.value);
      const myChart = echarts.init(
        chartRef.value,
      );
      const option: ECOption = {
        title: {
          text: "",
        },
        tooltip:{
          trigger:"item"
        },
        legend: {
          data: ["我的得分率", "全体得分率"],
        },
        grid: {
          left: "0",
          right: "15%",
          top: "15%",
          bottom: "15%",
        },
        radar: {
          name: {
            textStyle: {
              color: "#000", // 统一设置所有标签颜色为黑色
            },
          },
          indicator: props.klScoreLev.indicatorname,
          center: ["50%", "50%"],
          radius: "40%", // 减小雷达图半径
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: props.klScoreLev.all,
                name: "我的得分率",
                areaStyle: {
                  color: "#A2C4DA", // 为 Actual Spending 区域添加颜色和透明度
                },
              },
              {
                value: props.klScoreLev.mine,
                name: "全体得分率",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      // 监听图例选择改变事件
      const handleLegendSelectChanged = (params: echarts.EChartOptionEvent) => {
        // 这里可以根据需要更新图表选项
        // 例如，你可以获取新的图例状态，然后更新图表
        myChart?.setOption(option);
      };
      myChart.on("legendselectchanged", handleLegendSelectChanged);
      // 监听窗口大小变化事件
      const handleResize = () => {
        myChart?.resize();
      };
      window.addEventListener("resize", handleResize);
    }
  }
});
onUnmounted(() => {
  if (myChart) {
    myChart.off("legendselectchanged");
    myChart.dispose();
    const handleResize = () => {
      myChart?.resize();
    };
    window.removeEventListener("resize", handleResize);
  }
});
</script>
<style lang="less" scoped></style>
